<template>
	<view class="add_main">
		<view class="truth">
			<p class="text_top_popup">填写企业邀请码</p>
			<p class="tip">填写邀请码入驻成为企业的服务商</p>
			<uni-easyinput placeholderStyle="font-size:28rpx;" maxlength="6" @input="onKeyVinInput" v-model="inviteCode"
				placeholder="邀请码"></uni-easyinput>
			<button class="onlogout" @click="addCode"><span>加入</span></button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref, nextTick
	} from "vue";
	import apiNetwork from '@/util/network_api/network.js'
	const inviteCode = ref('')//邀请码
	//
	const addCode = async () => {
		if (inviteCode.value) {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			await apiNetwork.checkNetworkJoinCustomer(inviteCode.value).then(res => {
				if (res.code == 20000) {
					uni.redirectTo({
						url: '/pages_network/user/create_network_info?inviteCode=' + inviteCode.value
					})
					inviteCode.value = ''
				}
			})
			uni.hideLoading()
		} else {
			uni.showToast({
				title: '请先输入邀请码',
				icon: 'none'
			})
		}
	}
	// 只能输入数字和大写字母
	const onKeyVinInput = (e) => {
		let val = e
		if (/[^a-zA-Z0-9]/g.test(val)) { // 先过滤不需要的字符，只保留数字和字母
			val = val.replace(/[^a-zA-Z0-9]/g, '');
		}

		if (!/^[A-Z\d]+$/.test(val)) {// 再进行转换，小写转为大写
			val = val.toUpperCase();
		}
		nextTick(() => {
			inviteCode.value = val
		})
	}
</script>

<style lang="scss" scoped>
	.add_main {
		background-color: #fafafa;
		// padding-top: 40rpx;
	/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		.truth {
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.tip {
				font-size: 24rpx;
				color: #999;
				padding: 24rpx;
			}

			.onlogout {
				font-size: 28rpx;
				margin-top: 30rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin: 20rpx 0 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}
	}
</style>